<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${type.name}"></title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <link rel="stylesheet" type="text/css" th:href="@{/style/common.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/style/index.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/style/cloths.css}"/>
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
    <script src="/js/youhui.lazyLoad.js"></script>
</head>
<body>


    <!-- 头部 -->
    <div class="header">
        <a th:href="@{/index}" class="header-logo" style="width: 24px; margin-top: 4px;">
            <img style="width: 24px; height: 22px;" src="http://owtl83r0c.bkt.clouddn.com/back.png"/>
        </a>
        <span class="type-title" th:text="${type.name}"></span>
        <input type="hidden" id="typeId" th:value="${type.typeId}" />
        <div class="header-menu">
            <img src="http://owtl83r0c.bkt.clouddn.com/type.png"/>
        </div>
    </div>

    <!-- 分类导航 -->
    <div class="category-header-wrapper">
        <ul class="category-header-nav">
            <li th:each="type : ${types}">
                <a th:href="@{/type/{typeId} (typeId = ${type.typeId})}" th:text="${type.name}"></a>
            </li>
        </ul>
        <div class="arrow">
            <img src="http://owtl83r0c.bkt.clouddn.com/arrow.png"/>
        </div>
    </div>

    <div class="to-top">
        <img src="http://owtl83r0c.bkt.clouddn.com/top.png" />
    </div>

    <!-- 商品区 -->
    <div class="commodity-list">
        <div class="commodity-item" th:each="good : ${goods}">
            <a th:href="@{/good/{goodId} (goodId = ${good.goodsId})}" >
                <input type="hidden" id="goodsId" th:value="${good.goodsId}"/>
                <img class="lazy" src="http://owtl83r0c.bkt.clouddn.com/placeholder.gif" th:data="@{${good.image}}"/>
                <span th:text="${good.name}" class="commodity-title"></span>
                <div class="commodity-coupon-info">
                    <span th:unless="${#strings.equals(good.price, good.priceDiscount)}">券后</span>
                    <span th:unless="${#strings.equals(good.price, good.priceDiscount)}" class="coupon-price" th:text="${'￥' + good.priceDiscount}"></span>
                    <span th:if="${#strings.equals(good.price, good.priceDiscount)}">原价</span>
                    <span th:if="${#strings.equals(good.price, good.priceDiscount)}" class="coupon-price" th:text="${'￥' + good.price}"></span>
                    <span class="alreadyBuy" th:text="${good.alreadyBuy + '人已买'}"></span>
                </div>
            </a>
            <span class="coupon-banner">
                <span class="coupon-banner-left" th:text="${'￥' + good.discount} + '.0'"></span>
                <span class="coupon-banner-right">领券</span>
            </span>
        </div>
    </div>

    <p id="info">没有更多商品</p>

    <div id="loading">
        <img src="http://owtl83r0c.bkt.clouddn.com/loading.gif" />
    </div>

    <script>
        $(function () {
            var isShow = false
            $('.header-menu').on('click', function () {
                if (isShow) {
                    $('.category-header-wrapper').hide()
                    isShow = false
                } else {
                    isShow  = true
                    $('.category-header-wrapper').show()
                }
            })

            $('.arrow').on('click', function () {
                isShow = false
                $('.category-header-wrapper').hide()
            })

            // 点击阴影部分隐藏下拉分类导航
            $('body').on('click', function(e) {
                if (e.target.className === 'category-header-wrapper') {
                    isShow = false
                    $('.category-header-wrapper').hide()
                }
            });

            // 回到顶部
            $('.to-top').on('click', function () {
                $(window).scrollTop(0)
            })

            /*<![CDATA[*/
            var PAGENUM_KEY = '__pageNum__'
            var typeId = $('#typeId').val()
            var isFirstLoad = false
            var href = window.location.href
            var str = href.substr(href.lastIndexOf('/') + 1) ? href.substr(href.lastIndexOf('/') + 1) : '/'
            var top = Number(sessionStorage.getItem(str))

            if (top === 0) {
                sessionStorage.setItem(str + PAGENUM_KEY, 0)
            }
            var pageNum = Number(sessionStorage.getItem(str + PAGENUM_KEY))


            if (pageNum > 0) {
                $.get('/goodsbytype?typeId=' + typeId +'&pageNum=' + pageNum + '&all=all', function (data) {
                    var goods = data.content.splice(20)
                    var htmls = []
                    goods.forEach(function (good, index) {
                        var fragment = Number(good.price) === Number(good.priceDiscount)
                            ? '<span>原价</span><span class="coupon-price">￥' + good.price + '</span>'
                            : '<span>券后</span><span class="coupon-price">￥' + good.priceDiscount + '</span>'

                        var html =
                            '<div class="commodity-item">' +
                            '<a href="/good/' +  good.goodsId + '" > ' +
                            '<input type="hidden" id="goodsId" value="' + good.goodsId + '"/>' +
                            '<img class="lazy" src="http://owtl83r0c.bkt.clouddn.com/placeholder.gif" data="' + good.image + '"/>' +
                            '<span class="commodity-title">' + good.name + '</span> ' +
                            '<div class="commodity-coupon-info"> ' + fragment +
                            '<span class="alreadyBuy">' + good.alreadyBuy + '人已买</span> ' +
                            '</div> ' +
                            '</a> ' +
                            '<span class="hot">' +
                            '<img src="http://owtl83r0c.bkt.clouddn.com/hot.png" />' +
                            '</span>' +
                            '<span class="coupon-banner">' +
                            '<span class="coupon-banner-left">' + '￥' + good.discount + '.0' + '</span>' +
                            '<span class="coupon-banner-right">领券</span>' +
                            '</span>' +
                            '</div>'
                        htmls.push(html)
                    })
                    $('.commodity-list').append(htmls.join(''))
                    $('img.lazy').lazyLoad()
                    setTimeout(function () {
                        isFirstLoad = true
                        $(window).scrollTop(top)
                        $('.commodity-list').on('click', 'a', function (e) {
                            var id = $(this).find('#goodsId').val()
                            e.preventDefault()
                            window.location.href = '/good/' + id
                            setScrollTop()
                        })
                    }, 20)
                })
            } else {
                isFirstLoad = true
            }

            $('.commodity-list').on('click', 'a', function (e) {
                var id = $(this).find('#goodsId').val()
                e.preventDefault()
                window.location.href = '/good/' + id
                setScrollTop()
            })


            function setScrollTop () {
                var href = window.location.href
                var str = href.substr(href.lastIndexOf('/') + 1) ? href.substr(href.lastIndexOf('/') + 1) : '/'
                var scrollTop = $(window).scrollTop()
                sessionStorage.setItem(str, scrollTop)
            }


            // 下拉加载
            var windowHeight = $(window).height(),
                windowScrollTop = 0,
                documentHeight = 0,
                isLoad = false,
                isMore = true
            $(window).on('scroll', function () {
                windowScrollTop = $(window).scrollTop()
                documentHeight = $(document).height()
                if (windowScrollTop + windowHeight >= documentHeight && !isLoad && isMore && isFirstLoad) {
                    loadMore()
                }
                // 控制小火箭显示影藏
                if (windowScrollTop > 0) {
                    $('.to-top').css('display', 'flex')
                } else {
                    $('.to-top').css('display', 'none')
                }
            })

            function loadMore () {
                pageNum = Number(sessionStorage.getItem(str + PAGENUM_KEY)) + 1
                sessionStorage.setItem(str + PAGENUM_KEY, pageNum)
                isLoad = true
                $('#loading').show()
                $.get('/goodsbytype?typeId=' + typeId +'&pageNum=' + pageNum, function (data) {
                    isLoad = false
                    var goods = data.content
                    if (goods.length === 0) {
                        $('#loading').hide()
                        $('#info').show()
                        isMore = false
                        return
                    }
                    var htmls = []
                    goods.forEach(function (good, index) {
                        var fragment = Number(good.price) === Number(good.priceDiscount)
                            ? '<span>原价</span><span class="coupon-price">￥' + good.price + '</span>'
                            : '<span>券后</span><span class="coupon-price">￥' + good.priceDiscount + '</span>'

                        var html =
                            '<div class="commodity-item">' +
                                '<a href="/good/' +  good.goodsId + '" > ' +
                                    '<input type="hidden" id="goodsId" value="' + good.goodsId + '"/>' +
                                    '<img class="lazy" src="http://owtl83r0c.bkt.clouddn.com/placeholder.gif" data="' + good.image + '"/>' +
                                    '<span class="commodity-title">' + good.name + '</span> ' +
                                    '<div class="commodity-coupon-info"> ' + fragment +
                                        '<span class="alreadyBuy">' + good.alreadyBuy + '人已买</span> ' +
                                    '</div> ' +
                                '</a> ' +
                                '<span class="coupon-banner">' +
                                    '<span class="coupon-banner-left">' + '￥' + good.discount + '.0' + '</span>' +
                                    '<span class="coupon-banner-right">领券</span>' +
                                '</span>' +
                            '</div>'
                        htmls.push(html)
                    })
                    $('#loading').hide()
                    $('.commodity-list').append(htmls.join(''))
                    $('img.lazy').lazyLoad()
                    $('.commodity-list').on('click', 'a', function (e) {
                        var id = $(this).find('#goodsId').val()
                        e.preventDefault()
                        window.location.href = '/good/' + id
                        setScrollTop()
                    })
                })
            }

            // 图片懒加载:youhui.lazyLoad.js
            $('img.lazy').lazyLoad()
            /*]]>*/
        })
    </script>

</body>
</html>